<template>
	<view class="">
		<view class="navBlock flex a-l" v-if="!scrollStatus">
			<div class="" v-for="(item, i) in tabList" :key="i">

				<div v-if="i == 1" @click="toNav(i, item)" class="navItem navItem1"
					:class="tabIndexs == i ? 'active' : ''">
					<image :src="tabIndexs == i ? item.urlActive : item.url" mode=""></image>

					<div class="">
						<div class="findHouseCover"></div>
						<image class="findHouse" :src="tabIndexs == i ? item.textOn : item.text" mode=""></image>
					</div>
				</div>
				<div v-else @click="toNav(i, item)" class="navItem" :class="tabIndexs == i ? 'active' : ''">
					<image :src="tabIndexs == i ? item.urlActive : item.url" mode=""></image>
					<div class="">
						{{ item.name }}
					</div>
				</div>
			</div>
		</view>
		<view class="navBlocks" :class="scrollStatus ? 'show' : ''">
			<!-- <image src="https://oss-prod.xtrip.vip/common/index_icon/FAXFZH.png" mode=""></image> -->
			<image src="https://oss-prod.xtrip.vip/common/icon/20241031K8LWTW.png" mode=""></image>

		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			tabList: [{
				url: '../static/img/nav/home.png',
				urlActive: '../static/img/nav/home_cur.png',
				name: '首页1111',
				linkUrl: '/pages/index/index'
			},
			// {
			// 	url: 'https://oss-prod.xtrip.vip/common/index_icon/JQXSZJ.png',
			// 	urlActive: 'https://oss-prod.xtrip.vip/common/index_icon/FNTTBP.png',
			// 	name: '帮我找房',
			// 	text: 'https://oss-prod.xtrip.vip/common/20230731XVDMXJ.png',
			// 	textOn: '../static/img/textOn.png',
			// 	linkUrl: '/pages/index/houseIndex'
			// },
			{
				url: 'https://oss-prod.xtrip.vip/common/20241021YENONK.png',
				urlActive: 'https://oss-prod.xtrip.vip/common/20241021YENONK.png',
				name: '帮我找房',
				text: 'https://oss-prod.xtrip.vip/common/20241021NFCLOG.png',
				textOn: 'https://oss-prod.xtrip.vip/common/20241021NFCLOG.png',
				linkUrl: '/pages/aiChat/index'
			},
			{
				url: 'https://oss-prod.xtrip.vip/common/index_icon/MDHKMP.png',
				urlActive: 'https://oss-prod.xtrip.vip/common/index_icon/RSXVWQ.png',
				name: '我的',
				linkUrl: '/pages/mine/users'
			}
			],
			// tabIndex: this.tabIndexs
		};

	},
	props: {
		color: {
			default: "#fff",
		},
		scrollStatus: {
			type: Boolean,
			default: true
		},
		tabIndexs: {
			type: Number,
			default: 0
		}
	},
	created() {
		console.log(this.tabIndexs)
	},
	methods: {
		toNav(i, item) {
			getApp().globalData.aiStatus = true
			console.log(i)
			let _this = this
			console.log(item.linkUrl)
			_this.tabIndexs = i
			uni.switchTab({
				url: item.linkUrl
			})
		},
		goBack() {
			uni.navigateBack({
				delta: 1,
			});
		},
	},
};
</script>

<style scoped lang="scss">
.navBlocks {
	height: 152rpx;
	position: fixed;
	bottom: 40rpx;
	left: 0;
	right: 0;
	margin: 0 auto;
	width: 152rpx;
	z-index: 9999;
	transition: all .5s;
	transform: scale(0);

	&.show {
		display: block;
		transition: all .5s;
		transform: scale(1);
	}

	image {
		width: 100%;
		height: 100%;
	}
}

.navBlock {
	margin: 0 50rpx;
	height: 120rpx;
	background: #fff;
	box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(0, 0, 0, 0.1);
	border-radius: 120rpx;
	position: fixed;
	bottom: 40rpx;
	left: 0;
	width: calc(100% - 100rpx);
	z-index: 9999;
	justify-content: space-around;

	.navItem {
		text-align: center;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;

		&>image {
			width: 60rpx;
			height: 60rpx;
		}

		div {
			font-size: 20rpx;
			color: #979797;
			line-height: 28rpx;

			// .findHouse {
			// 	width: 116rpx;
			// 	height: 20rpx;
			// 	margin-top: 4rpx;
			// }
		}

		&.active {
			div {
				color: #191A1E;
			}
		}

	}

	.navItem1 {
		.findHouseCover {
			width: 116rpx;
			height: 24rpx;
		}

		.findHouse {
			position: absolute;
			top: 54rpx;
			left: 0;

			width: 116rpx;
			height: 26rpx;
			margin: 0 auto;
		}
	}
}
</style>